<template>
  <div class="box">
    <!-- 酒店信息 -->
    <detailInfomation :data="hotelData" />

    <!-- 价格来源 -->
    <detailPrice :data="hotelData.products" />

    <!-- 地图 -->
    <amap />

    <!-- 酒店设施 -->
    <detailFacility :data="hotelData" />

    <!-- 评论 -->
    <detailComment
      @getTotal="setTotal"
      @getPages="setPages"
      :currentPage="currentPage"
      :pageSize="pageSize"
    />

    <!-- 文章分页部分 开始 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <!-- 文章分页部分 结束 -->
  </div>
</template>

<script>
import detailInfomation from "@/components/hotel/details/myInfomation";
import detailPrice from "@/components/hotel/details/detailPrice";
import amap from "@/components/hotel/amap";
import detailFacility from "@/components/hotel/details/detailFacility";
import detailComment from "@/components/hotel/details/myComment";
import detailReply from "@/components/hotel/details/myFloor";

export default {
  components: {
    detailPrice,
    amap,
    detailInfomation,
    detailFacility,
    detailComment,
    detailReply,
  },
  data() {
    return {
      hotelData: {},
      currentPage: 1,
      pageSize: 5,
      postDetail: [], // 文章详情数据
      total: 50,
    };
  },
  mounted() {
    this.$axios("/hotels", { params: this.$route.query }).then((res) => {
      console.log("1、-----请求酒店详情信息-----");
      this.hotelData = res.data.data[0];
      console.log(this.hotelData);
    });
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      // console.log(`当前页: ${val}`);
    },
    // 子组件传过来的分页总数
    setTotal(val) {
      this.total = val;
    },
    setPages(val) {
      this.currentPage = val;
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 1000px;
  margin: 30px auto;
  overflow: hidden;
}
</style>